<section py="8|12|16|24">
  <Container>
    <Flexbox flexDirection="column" textAlign="center">
      <p m="0" fontSize="2xl" fontWeight="semibold">
        Reflex
      </p>
      <h1 variant="heading.h1" m="0" fontWeight="extrabold" lineHeight="tight">
        Add videos to your Gatsby site
      </h1>
      <p fontSize="xl|2xl" mt="2">
        Create a video section with Reflex and Gatsby
      </p>
      <a
        href="/videos"
        variant="button.primary"
        rounded="full"
        size="22"
        transition="transform .15s ease-in"
        _hover={{
          transform: "scale(1.1)",
          boxShadow: "xl",
        }}
      >
        <Icon name="play" size="8" ml="1" />
        <VisuallyHidden>Play video</VisuallyHidden>
      </a>
    </Flexbox>
  </Container>
</section>
